﻿"use strict";

// 依目前畫筆決定要怎麼畫
function draw( phyX, phyY )
{
    if ( gPenStyle == TYPE_PEN_LINE)
    {
        var previousPhyX = gPreviousPhyX != INIT_POS ? gPreviousPhyX : phyX;
        var previousPhyY = gPreviousPhyY != INIT_POS ? gPreviousPhyY : phyY;
        gPenHistory += drawLine( phyX, phyY, previousPhyX, previousPhyY );
    }
    else if ( gPenStyle == TYPE_PEN_RECTANGLE )
    {
        gPenHistory += drawRectangle( phyX, phyY, gPenWidth, gPenWidth, gPenColor ); // 5
    }
    else if ( gPenStyle == TYPE_PEN_CIRCLE )
    {
        gPenHistory += drawCircle( phyX, phyY ); // 2
    }
    else if ( gPenStyle == TYPE_PEN_DOT )
    {
        gPenHistory += drawDot( phyX, phyY ); // 2
    }
    else if ( gPenStyle == TYPE_TEXT )
    {
        gPenHistory += drawText( gDrawText, phyX, phyY, gTextWidth, gPenColor ); // 5
    }
}

// 動畫般畫出線條
function drawLineAnimation( sourceX, sourceY, destinationX, destinationY )
{
    
    return function()
    {
        drawLine( sourceX, sourceY, destinationX, destinationY );
    }
}



// 清空畫布
function cleanCanvas()
{
    gContext.save();
    gContext.fillStyle = gBackColor;
    gContext.beginPath();
    gContext.rect( 0, 0, document.body.offsetWidth, document.body.offsetHeight );
    gContext.closePath();
    gContext.fill();
    gContext.restore();
}

// 依傳入參數選擇畫筆並畫圖
function drawLine( sourceX, sourceY, destinationX, destinationY )
{
    if ( gDrawEnable )
    {
        drawCircle( sourceX, sourceY ); // 補齊轉換方向時的縫隙

        gContext.save();
        gContext.beginPath();  
        gContext.lineWidth = gPenWidth; // 直線寬度
        gContext.moveTo( sourceX, sourceY); // 目前位置為起點
        gContext.lineTo( destinationX, destinationY ); // 上次位置為終點
        gContext.strokeStyle = gPenColor; // 直線顏色
        gContext.closePath(); 
        gContext.stroke(); // 畫直線連接起點和終點
        gContext.restore();
    }
    
    return "" + TYPE_PEN_LINE + TOKEN_GAP + sourceX + TOKEN_GAP + sourceY + TOKEN_GAP + destinationX + TOKEN_GAP + destinationY + MOTION_GAP;
}

// 動畫般畫出四邊形
function drawRectangleAnimation( x, y, width, height, color )
{
    return function()
    {
        drawRectangle( x, y, width, height, color );
    }
}

// 畫出四邊形
function drawRectangle( x, y, width, height, color )
{
    if ( gDrawEnable )
    { 
        gContext.save();
        gContext.beginPath(); // 開始路徑
        gContext.rect( x, y, width, height );
        gContext.closePath(); // 關閉路徑
        gContext.fillStyle = color; // 填充顏色
        gContext.fill();
        gContext.restore();
    }

    return "" + TYPE_PEN_RECTANGLE + TOKEN_GAP + x + TOKEN_GAP + y + TOKEN_GAP + width + TOKEN_GAP + width + TOKEN_GAP + color + MOTION_GAP;
}

// 動態畫出圓形
function drawCircleAnimation( x, y )
{
    return function()
    {
        drawCircle( x, y );
    }
}

// 畫出圓形
function drawCircle( x, y )
{
    if ( gDrawEnable )
    {
        gContext.save();
        gContext.beginPath(); // 開始路徑
        gContext.arc( x, y, gPenWidth / 2, 0, Math.PI * 2, true ); // 畫出圓形
        gContext.closePath(); // 關閉路徑
        gContext.fillStyle = gPenColor; // 填充顏色
        gContext.fill();
        gContext.restore();
    }

    return "" + TYPE_PEN_CIRCLE + TOKEN_GAP + x + TOKEN_GAP + y + MOTION_GAP;
} 

// 動態畫出隨機點
function drawDotAnimation( x, y )
{
    return function()
    {
        drawDot( x, y );
    }
}

// 畫出隨機點
function drawDot( x, y )
{

    if ( gDrawEnable )
    {
        gContext.save();

        var range = gPenWidth * 2;

        for ( var i = 0; i < 10; i ++ )
        {
            var newX = x - range + getRandom( range );
            var newY = y - range + getRandom( range );

            gContext.beginPath(); // 開始路徑
            gContext.arc( newX, newY, 1, 0, Math.PI * 2, true ); // 畫出圓形
            gContext.closePath(); // 關閉路徑
            gContext.fillStyle = gPenColor; // 填充顏色
            gContext.fill();
        }
        
        gContext.restore();
    }

    return "" + TYPE_PEN_DOT + TOKEN_GAP + x + TOKEN_GAP + y + MOTION_GAP;
} 

// 動態畫出字串
function drawTextAnimation( text, x, y, textWidth, fontColor )
{
    return function()
    {
        drawText( text, x, y, textWidth, fontColor );
    }
}

// 畫出字串
function drawText( text, x, y, textWidth, fontColor )
{
    if ( gDrawEnable )
    {
        gContext.save();
        var fontSize = 10;

        gContext.fillStyle = fontColor;
        gContext.font = "" + fontSize + 'px 微軟正黑體';
        gContext.textBaseline = "middle";
        gContext.textAlign = "center";

        var metrics = gContext.measureText( decodeText( text ) ); // 預估原本的字串寬度
        var sizeRatio = textWidth / metrics.width; // 跟要求的寬度的比例
        var newFontSize = fontSize * sizeRatio;

        gContext.font = "" + newFontSize + 'px 微軟正黑體';
        gContext.fillText( decodeText( text ), x, y );
        gContext.restore();
    }

    return "" + TYPE_TEXT + TOKEN_GAP + text + TOKEN_GAP + x + TOKEN_GAP + y + TOKEN_GAP + textWidth + TOKEN_GAP + fontColor + MOTION_GAP;
}

// 繪製顏色頁面
function showColorBox()
{
    gNowPage = PAGE_COLOR;

    saveGlobal();

    cleanCanvas();

    var width = document.body.offsetWidth;
    var height = document.body.offsetHeight;
    
    var widthCount = gColorWidthCount;
    var heightCount = gColorHeightCount;
    
    var singleWidth = width / widthCount;
    var singleHeight = height / heightCount;
    var singleOffset = singleWidth / 10; // 方塊間的間隔留白
    
    //printDebug( singleWidth + "," + singleHeight );

    for ( var i = 0; i < widthCount * heightCount; i ++ )
    {
        gColors[i] = getRandomColor();
    }
    
    gColors[0] = "#000000"; // 黑色
    gColors[widthCount * heightCount - 1] = "#FFFFFF"; // 白色
    
    var temp;
    
    for ( var i = 0; i < widthCount * heightCount; i ++ )
    {
        var x = ( Math.floor( i / heightCount ) ) * singleWidth;
        var y = ( i % heightCount ) * singleHeight;
        
        //temp += "(" + x + "," + y + ") ";

        setTimeout( drawRectangleAnimation( x, y, singleWidth - singleOffset, singleHeight - singleOffset, gColors[i] ), gPlaySpeed * getRandom( widthCount * heightCount / 4 ) );
        /*
        var timer = gPlaySpeed * getRandom( widthCount * heightCount / 4 );

        setTimeout( setGlobalAnimation( gBackColor, gColors[i], singleWidth - singleOffset - getRandom( singleOffset ), gPlaySpeed ), timer );
        setTimeout( drawCircleAnimation( x, y ), timer );
        */
        
        addButton( BUTTON_COLOR, x, y, singleWidth, singleHeight ); // 向系統註冊此按鈕
    }
    
    restoreGlobal();
    //printDebug( temp );
}

// 展示有哪些畫筆可使用
function showPenBox()
{
    cleanButtons();
    cleanCanvas();
}

// 展示主界面
function showDrawingPage()
{
    gNowPage = PAGE_DRAWING;
    cleanButtons();
    //cleanCanvas();
}

// 展示有哪些額外功能可使用
function showFunctionBox()
{

}

// 展示之前儲存的畫面
function showStoredDrawing( type )
{
    var imageObj = new Image();

    imageObj.onload = function() {
        if ( type != REDO )
        {
            cleanCanvas();
        }
        gContext.drawImage( imageObj, 0, 0 );
    };
    
    if ( type == UNDO )
    {
        imageObj.src = getPrevDrawing();
        
    }
    else if ( type == REDO )
    {
        imageObj.src = getNextDrawing();
    }
    else if ( type == NOWDO )
    {
        imageObj.src = getNowDrawing();
    }
}
